<template>
    <div class="api-show">
        <el-row>
            <template v-for="(data,index) in interfaceInfoList" :key="index">
                <el-col :span="8">
                    <el-card class="box-card">
                        <template #header>
                            <div class="card-header">
                                <span class="font-1" style="font-size: 20px">{{data.name}}</span>
                                <el-tag type="primary">ID:{{data.id}}</el-tag>
                            </div>
                        </template>
                        <div style="font-size: 17px">
                            <div class="user-dataTag">
                                <span class="font-1" style="color: black">{{data.description}}</span>
                            </div>
                            <div class="user-dataTag" style="margin-top: 40px">
                                <el-button type="primary" class="font-1" style="font-size: 17px" @click="openInterface(data.id)" link>
                                    <el-icon style="color: #79bbff;margin-right: 5px" size="20">
                                        <Open/>
                                    </el-icon>
                                    开通接口
                                </el-button>

                                <el-button type="warning" class="font-1" style="margin-left: 50px;font-size: 17px;color: #95d475" @click="checkDoc(data.id)" link>
                                    <el-icon style="color: #95d475;margin-right: 5px" size="20">
                                        <Document/>
                                    </el-icon>
                                    查看文档
                                </el-button>
                            </div>
                        </div>
                    </el-card>
                </el-col>
            </template>
        </el-row>

    </div>
</template>

<script setup>
import {onMounted, ref, reactive} from 'vue'
import axios from 'axios';
import {ElMessage} from "element-plus";
import router from "@/router/index.js";
import store from "@/store/index.js";
import {get, post} from "@/net/index.js";

let interfaceInfoList = ref([]);
let userInfo = JSON.parse(localStorage.getItem('loggedUser'));

// 开通接口
const openInterface = (id) => {
    // console.log("要开通的接口Id:",id);
    // console.log("用户信息：",userInfo);

    post('/api/userInterfaceInfo/add',
        {
            userId: userInfo.id,
            interfaceInfoId: id,
            totalNum: 50,
            leftNum: 50,
        },
        (data) => {
            if (data === "开通成功！") {
                ElMessage.success("开通成功！");
            }
        },
        (message, code, url) => {
            console.warn(`请求地址：${url}，状态码：${code}，错误信息：${message}`)
            ElMessage.error('开通失败！' + message);
        }
    );
}

// 查看文档
const checkDoc = (id) => {
    // 跳转到接口文档页面
    router.replace({ path: '/interfaceInfo', query: { id: id,userId: userInfo.id} });
}

onMounted(() => {
    get('/api/interfaceInfo/list',
        (data) => {
            interfaceInfoList.value = data; // 直接使用返回的 data
        }
    );
});
</script>

<style scoped>
@font-face {
    font-family: "Sphere fez"; /* 定义字体名称 */
    src: url('/src/assets/font/spherefez-ezxam.ttf') format('truetype'); /* 指定字体文件的路径和格式 */
}

@font-face {
    font-family: "shangshou"; /* 定义字体名称 */
    src: url('/src/assets/font/上首简黑极细体.ttf') format('truetype'); /* 指定字体文件的路径和格式 */
}

.font-1 {
    color: #409EFF;
    font-weight: bold;
    font-family: shangshou;
}

.api-show {
    display: flex;
    justify-content: space-between;
    align-items: start;
}

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.box-card {
    width: 500px;
    margin: 15px;
    cursor: pointer;
    border-radius: 10px;
    box-shadow: 0 0 0 #cac6c6;
    background: #FAFCFF;
}

.box-card:hover {
    box-shadow: 0 10px 10px #cac6c6;
}

.user-dataTag {
    display: flex;
    flex-direction: row;
    justify-items: center;
}

.user-dataTag span {
    margin-left: 5px;
}
</style>